/*
 * @Author: 肖思汗 
 * @Date: 2025-06-24 22:48:12 
 * @Last Modified by: 肖思汗
 * @Last Modified time: 2025-07-13 16:02:16
 */

import Taro from "@tarojs/taro";
import clsx from "clsx";
import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import CustomHeader from "../CustomHeader/CustomHeader";
import CustomTabBar from "../CustomTabBar/CustomTabBar";
import styles from "./pageLayer.module.less";
import { observer } from "mobx-react-lite";
import utilsStore from "src/utils/utilsStore";
import utils from "src/utils/utils";
import { ArrowLeft } from "@nutui/icons-react-taro";


interface Iprops {
    title?: string; // 默认"优T定制"
    hasHeader?: boolean; // 显示头部
    showBack?: boolean; // 显示返回按钮
    backText?: ReactNode; // 自定义返回按钮
    onBack?: () => void;

    hasTabBar?: boolean; // 显示底部导航栏
    className?: string;
    children?: ReactNode;
    style?: React.CSSProperties;

    onTouchStart?: (e: React.TouchEvent<HTMLDivElement>) => void;
    onTouchMove?: (e: React.TouchEvent<HTMLDivElement>) => void;
    onTouchEnd?: (e: React.TouchEvent<HTMLDivElement>) => void;
}

// 页面布局组件 
const PageLayer = observer((props: Iprops) => {

    const dom = useRef<HTMLDivElement | null>(null);

    useEffect(() => {
    }, []);

    useEffect(() => autorun(() => {
    }, { delay: 30 }), []);

    const hasHeader = [undefined, true].includes(props.hasHeader);
    const hasTabBar = [undefined, true].includes(props.hasTabBar);

    return (
        <div
            ref={dom}
            className={clsx(
                styles.pageLayer,
                props.className,
                hasHeader && styles.hasHeader,
                hasTabBar && styles.hasTabBar,
            )}
            style={{
                paddingTop: hasHeader ? utilsStore.titleTop : 0,
                paddingBottom: hasTabBar ? utilsStore.barBottom : 0,
                ...(props.style || {}),
            }}
            onTouchStart={props.onTouchStart}
            onTouchMove={props.onTouchMove}
            onTouchEnd={props.onTouchEnd}
        >
            {/* 自定义头部 */}
            {
                [undefined, true].includes(props.hasHeader) &&
                <CustomHeader
                    title={props.title}
                    showBack={props.showBack}
                    onBack={props.onBack}
                    backIcon={
                        props.backText &&
                        <><ArrowLeft />{props.backText}</>
                    }
                />
            }

            {props.children}

            {/* 自定义导航栏 */}
            {[undefined, true].includes(props.hasTabBar) &&
                <CustomTabBar />
            }
        </div>
    );
});

export default PageLayer;